<template>
    <div style="margin:10px">
      <el-tabs type="border-card" v-model="activeName" >
        <el-tab-pane label="越限报警" name="first"></el-tab-pane>
        <el-tab-pane label="故障统计" name="second"></el-tab-pane>
        <el-tab-pane label="故障预测" name="third"></el-tab-pane>
        <el-tab-pane label="历史记录" name="fourth"></el-tab-pane>
      </el-tabs>
      <el-card style="margin-top: -32px;height: 780px">
        <div style="display: flex">
          <div style="width: 33%">
            <div style="width: 200px; padding: 20px; margin-left: 50px ">
              <h3>操作记录（条）</h3>
              <h1 style="color: #5470c6;font-size:70px;">196</h1>
            </div>
          </div>
          <div style="width: 33%;text-align: center">
            <div style="display: flex;align-items:center;height: 100%">
              <label style="margin-right: 10px;font-size: 20px;color: black">删除</label>
              <el-progress percentage="100" style="width: 300px;display: inline-block"></el-progress>
            </div>
          </div>
          <div style="width: 33%;text-align: center">
            <div style="display: flex;align-items:center;height: 100%;">
              <div style="display: flex;align-items:flex-end;">
                <label style="margin-right: 10px;font-size: 20px;color: black">修改</label>
              </div>
              <div style="display: flex;flex-flow: column">
                <!--                <div style="font-size: 30px;color: #7F828B">123</div>-->
                <el-progress percentage="100" style="width: 300px"></el-progress>
              </div>
            </div>
          </div>
        </div>
        <el-table :data="dataList" stripe style="width: 100%" height="550">
          <el-table-column label="序号" type="index" prop="indexNum">
          </el-table-column>
          <el-table-column label="故障名称" prop="FaultdName">
          </el-table-column>
          <el-table-column label="故障类型" prop="FaultType">
          </el-table-column>
          <el-table-column label="故障等级" prop="FaultGrade">
          </el-table-column>
          <el-table-column label="位置" prop="position">
          </el-table-column>
          <el-table-column label="车号" prop="cardNum">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="danger">删除</el-button>
              <el-button size="mini" type="primary">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px;">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="20"
            style="display: inline-block"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
          </el-pagination>
        </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "FaultDataCard",
      data(){
          return{
            activeName:'first',
            dataList:[{indexNum:'1',FaultdName:'振动严重',FaultType:'振动',FaultGrade:'一级',position:'轴 承',cardNum:'京A1234'},
              {indexNum:'2',FaultdName:'振动严重',FaultType:'振动',FaultGrade:'一级',position:'发动机',cardNum:'京A12E12'},
              {indexNum:'3',FaultdName:'振动严重',FaultType:'振动',FaultGrade:'二级',position:'风动机',cardNum:'京A12R42'},
              {indexNum:'4',FaultdName:'振动严重',FaultType:'振动',FaultGrade:'三级',position:'发电机',cardNum:'京A12D4'},
              {indexNum:'5',FaultdName:'发热严重',FaultType:'发热',FaultGrade:'二级',position:'机 舱',cardNum:'京A1AE34'},
              {indexNum:'6',FaultdName:'发热严重',FaultType:'发热',FaultGrade:'三级',position:'机 舱',cardNum:'京A1GF34'},
              {indexNum:'7',FaultdName:'发热严重',FaultType:'发热',FaultGrade:'二级',position:'机 舱',cardNum:'京A1W34'},
              {indexNum:'8',FaultdName:'噪音大',FaultType:'噪音',FaultGrade:'三级',position:'变桨系统',cardNum:'京A1FE34'},
              {indexNum:'9',FaultdName:'噪音大',FaultType:'噪音',FaultGrade:'二级',position:'变桨系统',cardNum:'京AWE34'},
            ]
          }
      }
    }
</script>

<style scoped>
  @import "../../assets/css/table.css";
</style>
